import React, { PureComponent, Fragment } from 'react';
import { FormattedMessage, formatMessage } from 'umi/locale';
import {  Cascader, Upload, Form, Icon, message, TreeSelect } from 'antd';
import {Select,Button , Table ,Modal,Pagination} from '@/components/CustomAntd'

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
}
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
@Form.create()
export default class ImportModal extends PureComponent {
  render() {
    const {
      importModalUpload ,
      importModalClose,
      importModal_dept_list,
      tenantList ,
      renderTreeNodes,
      downloadTemplate,
      searchDept,
      form :{getFieldDecorator }} =this.props;
    const {form} = this.props
    const limitSize = (list) => {
      if(list && list.length > 1){
        list.splice(0,1)
      }
      return false;
    }
    const Deptas = (value, enter_type) => {
      if (enter_type === 'importModalProps') {
        this.props.form.setFieldsValue({ deptIds: undefined });
        searchDept(value, enter_type);
      }
    };
    const upLoadprops = {
      name: 'file',
      action: '',

      beforeUpload(file,fileList) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('上传文件不能大于2M，请重新上传！');

        }
        return false;

      },
      onChange({ file, fileList }) {
        limitSize(fileList)
      },
    };
    const handleImportModalUpload = e => {
        e.preventDefault();
        let prams ={} ;
        form.validateFields((err, fieldsValue) => {
          if (!err) {
            if(fieldsValue.tenantId && fieldsValue.deptIds){
              if(fieldsValue.file&& fieldsValue.file.fileList.length > 0){
                prams = {
                  files: fieldsValue.file,
                  tenantId:fieldsValue.tenantId,
                  deptIds:fieldsValue.deptIds,
                }
                importModalUpload(prams);
              }else{
                message.error('请先选择要上传的文件!');
              }
            }else{
              message.warning('上传用户需先选择所属租户及部门，请选中后重试!');
            }

          }
        })
    }
    return (
      <Modal visible={true} title="导入" width={600} onOk={handleImportModalUpload} onCancel={importModalClose}>
        <FormItem {...formItemLayout} required={true} label="所属租户">
          {getFieldDecorator('tenantId')(
            <Select
              allowClear
              placeholder="请选择"
              style={{ width: '70%' }}
              onChange={(tenant_id)=>Deptas(tenant_id,'importModalProps')}
              showSearch
              filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              {tenantList && tenantList.length > 0
                ? tenantList.map(function (item) {
                  return (
                    <Select.Option
                      key={item.tenant_id}
                      id={item.tenant_id}
                      value={item.tenant_id}
                    >
                      {item.tenant_name}
                    </Select.Option>
                  );
                })
                : []}
            </Select>
          )}
        </FormItem>
        <FormItem {...formItemLayout} required={true} label="所属部门">
          {getFieldDecorator('deptIds')(
            <TreeSelect
              allowClear
              style={{ width: '70%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择"
              treeDefaultExpandAll={true}
            >
              {renderTreeNodes(importModal_dept_list)}
            </TreeSelect>
          )}
        </FormItem>
        <FormItem label="上传文件" required={true}  {...formItemLayout}>
          {getFieldDecorator('file')(
            <Upload {...upLoadprops}>
              <Button>
                <Icon type="upload" /> 上传
              </Button>
            </Upload>
          )}
        </FormItem>
        <Button onClick={downloadTemplate}>下载上传模板</Button>
      </Modal>
    )
  }
}
